/*
* 组件：右侧固定栏
* 不接收props参数
*/
import { connect } from 'react-redux';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import { backTop, onlineService } from './toolbar';
import { isLogin } from '@/routes_auth';
import { getCartListData } from '@/store/actions/cart';
// 图片
import gzhImg from "@/public/imgs/gzh.png";

const ToolBar = ({ _getCartListData, cart: { total } }) => {

    const router = useRouter();
    const [isLogged, setIsLogged] = useState(false);

    // 首次加载，获取是否有购物车商品
    // 需要用户登录
    useEffect(() => {
        const _isLogin = isLogin();
        _isLogin && _getCartListData();
        setIsLogged(_isLogin);
    }, []);

    return (
        <aside className="tool-bar">
            <ul>
                <li className="sep"></li>
                <li className="sep"></li>
                <li className='cartPoint' onClick={() => { router.push('/shopping_cart') }}>
                    <span className="iconfont icon-gouwuche"></span>
                    { isLogged ? <em>{ total || "" }</em> : null }
                    <p>购物车</p>
                </li>
                <li className="service" onClick={() => { onlineService() }}>
                    <span className="iconfont icon-kefu"></span>
                    <p>咨询</p>
                    <div className="hide">咨询<br/>客服</div>
                </li>
                <li>
                    <span className="iconfont icon-weixin"></span>
                    <p>公众号</p>
                    <div className="hide">
                        <p style={{margin: '0 0 8px'}}>游西藏公众号</p>
                        <img src={process.env.basePath + gzhImg.src} alt="公众号" />
                    </div>
                </li>
                <li className="top" onClick={() => { backTop() }} >
                    <span className="iconfont icon-dingbu"></span>
                    <div className="hide">返回<br/>顶部</div>
                </li> 
            </ul>
        </aside>
    )
}

const mapStateToProps = (state) => {
    return {
        cart: state.cart
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        _getCartListData: (v) => dispatch(getCartListData(v))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(ToolBar)